<!--
 * @Author: dfh
 * @Date: 2024-10-18 15:13:44
 * @LastEditors: dfh
 * @Modified By: dfh
 * @describe: 
-->
<template>
  <!-- v-bind="$attrs" 未指定的都是通过$attrs传递 如 click... -->
  <Icon :class="svgClass" :icon="iconName" v-if="!isExt" v-bind="$attrs" />
  <div
    v-else
    :style="styleExternalIcon"
    :class="svgClass"
    inline-block
    bg-current
    v-bind="$attrs"
  ></div>
</template>
<script setup lang="ts">
  import { Icon } from "@iconify/vue";
  import { isExternal } from "@/utils/validate";

  //1.接收属性，name和class
  const { iconName, customClass } = defineProps<{
    iconName: string;
    customClass?: string;
  }>();

  //2.判断是否是外链svg
  const isExt = computed(() => isExternal(iconName));

  //3.是否添加自定义class,下面的icon是在uno.config.js中配置的短名称
  const svgClass = computed(() =>
    customClass ? `icon ${customClass}` : "icon"
  );

  //4.如果iconClass是带协议的图标链接 则通过style css属性方式渲染
  const styleExternalIcon = computed(() => ({
    mask: `url(${iconName}) no-repeat 50% 50%`,
    "webkit-mask": `url(${iconName}) no-repeat 50% 50%`,
    "mask-size": "cover"
  }));
</script>
